<template>
	<view class="detail_box">
		<view class="title_box4 cardF wp">
			<view class="tb_left dpflxr">
				<view v-if="info.avatar==null">
				<view class="avatar">
					<image
						src="../../static/images/img11.png"
						mode="aspectFill"></image>
				</view>
				</view>
				<view v-else>
					<view class="avatar">
						<image
							:src=info.avatar
							mode="aspectFill"></image>
					</view>
				</view>
				<view class="words">
					<view class="dpflxr">
						<text class="name">{{info.userName}}</text>
						<view class="icon">
							<!-- <image src="../../static/images/icon_nv.png"></image> -->
							<image :src="info.userSex==1?'../../static/images/icon_nv.png':'../../static/images/icon_nan.png'"></image>
						</view>
					</view>
					<text class="num" @click="callPhone(info.mobile)">{{info.mobile}}</text>
				</view>
			</view>
			<text class="credits">当前积分 {{points}}</text>
		</view>
		<view class="card">
			<view class="title_box5  dpflxr">
				<view class="titleLine"></view>
				<text>基本信息</text>
			</view>
			<view v-for="item in baseInfo" class="infoItem wp present dpflxr">
				<text class="iTitle">{{item.title}}</text>
				<text class="iContent">{{item.content}}</text>
			</view>
		</view>

		<view class="card">
			<view class="title_box5  dpflxrjb">
				<view class="dpflxr">
					<view class="titleLine"></view>
					<text>储值卡</text>
				</view>
				<text class="note">{{card_number}}张可用</text>
			</view>
			<scroll-view scroll-x="true" class="dpList">

				<view class="depositCard  pos_rel" v-for="items in card_info">
					<view v-if="items.backgroundImageUrl==null">
						<image class="pos_abs bgImg" src="../../static/images/bg.png"></image>
					</view>
					<view v-else>
						<image class="pos_abs bgImg" :src="getImgUrl(items.backgroundImageUrl)"></image>
					</view>
					
					<!-- ../../static/images/bg.png -->
					<view class="dpLogo dpflxr pos_abs">
						<view class="cardLogo">
						</view>
						<view class="cardTitle dpflxcfs">
							<text class="title">储值卡</text>
							<text>到期日{{items.effectiveEndDate}}</text>
						</view>

					</view>
					<view class="statistic dpflxr pos_abs">
<!-- 						<view class="sItem">
							<text>总金额</text>
							<view class="dpflxr price">
								<text class="num">{{items.balance}}</text>元
							</view>
						</view> -->
						<view class="sItem">
<!-- 							<text>{{items.countingCard===1?'余额':'暂无'}}</text>
							<view class="dpflxr price">
								<text class="num">{{items.balance}}</text>元
							</view> -->
							<view v-if="items.countingCard===1">
								<text>
									
									剩余次数
									
								</text>
								<view class="dpflxr price">
									<text class="num">{{items.remainingTimes}}</text>次
								</view>
								
							</view>
							<view v-else>
								<text>
									
									余额
									
								</text>
								<view class="dpflxr price">
									<text class="num">{{items.balance}}</text>元
								</view>
							</view>
						</view>
						<view class="sItem">
							<text>卡类型</text>
							<view class="dpflxr price">
								<text class="num">{{items.cardTypeName}}</text>
							</view>
						</view>
					</view>

				</view>
			</scroll-view>

		</view>
		<view class="card">
			<view class="title_box5  dpflxrjb">
				<view class="dpflxr">
					<view class="titleLine"></view>
					<text>最近三次购物</text>
				</view>
				<text class="total">总消费{{total}}次</text>
			</view>
			<view class="goodWrapper w"  v-for="item in consumption_info">
				<view class="dpflxr">
					<view class="circle"></view>
					<text class="time">{{item.createdAt}}</text>
				</view>
				<view class="cb_item dpflxr">

					<view class="img">
						<!-- <image
							src="https://babybear-fx.oss-cn-shenzhen.aliyuncs.com/VIPxcx/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9B%BE%E7%89%87/img_bg3.jpg"
							mode="aspectFill"></image> -->
							<image
								:src="getImgUrl(item.orderFormItems[0].goodsDTO.coverFile.filePath)"
								mode="aspectFill"></image>
					</view>
					<view class="words">
						<view class="title">{{item.orderFormItems[0].goodsDTO.productName}}</view>
						<view class="dpflxrjb">
							<text class="label">{{item.orderFormItems[0].goodsDTO.clothColor}}，{{item.orderFormItems[0].goodsDTO.itemValue}}</text>
							<view class="changeAmount dpflxr">
								<text>x1</text>
							</view>
						</view>
						
						<view class="wFoot dpflxr">
							<view class="price dpflxr">消费金额：{{item.realAmount}}</view>
							
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="btn_box4 dpflxr ">
		    <!-- <navigator url="../index_membership_detail_record/index_membership_detail_record" class="btn">跟进记录</navigator> -->
			<view @click="follow(info.userId)" class="btn">跟进记录</view>
		    <view @click="details(info.userId)" class="btn">添加跟进</view>
			<!-- <navigator url="../index_membership_detail_add/index_membership_detail_add" class="btn right">添加跟进</navigator> -->
		</view>
	</view>
</template>

<script>
	import request from "@/api/index.js";
	import configs from "@/config/common.js";
	import permision from "@/config/permission.js"
	export default {
		data() {
			return {
				baseInfo: [{
						title: '会员编号',
						content: 'BH13545515'
					},
					{
						title: '会员等级',
						content: '普通会员'
					},
					{
						title: '会员状态',
						content: '已有宝宝'
					},
					{
						title: '宝宝生日/预产期',
						content: '2018-09-09'
					},
					{
						title: '出生日期(本人)',
						content: '1990-05-25'
					},
					{
						title: '办卡状态',
						content: '已开卡'
					},
					{
						title: '办卡人姓名',
						content: '王小波'
					},
					{
						title: '办卡人员工ID',
						content: '387487'
					}

				],
				info:[],
				consumption_info:[],
				card_info:[],
				// card_info2:[
				// 	{
				// 		bgImg:null
				// 	},
				// 	{
				// 		bgImg:"/shop/attachment/babybear-fx/6a6bb90c63e941fbb4de7ffba271b57c.png"
				// 	},
				// ],
				total:'',
				card_number:'',
				points:0
			}
		},
		onLoad(options) {
			var id=options.userId;
			this.userinfo(id);
			this.consumption(id);
			this.card(id);
		},
		methods: {
			userinfo: function(e) {
				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontUserinfo/'+e, 'GET').then(res => {
					console.log(res.data.data);
					this.info=res.data.data.userInfo;
					
					if(res.data.data.points.points==null){
						this.points=0;
					}else{
						this.points=res.data.data.points.points;
					}
					console.log("userStatus0="+res.data.data.userInfo.userStatus);
					var userStatus = this.doStatus(res.data.data.userInfo.userStatus);
					console.log("userStatus1="+userStatus);
					var bb=[{
							title: '会员编号',
							content: res.data.data.userInfo.userCode
						},
						{
							title: '会员等级',
							content: res.data.data.userInfo.userLevelCodeName
						},
						{
							title: '会员状态',
							content: userStatus
						},
						{
							title: '宝宝生日/预产期',
							content: res.data.data.userInfo.babyBirthdayAt
						},
						{
							title: '出生日期(本人)',
							content: res.data.data.userInfo.birthday
						},
						{
							title: '办卡状态',
							content: '已办卡'
						},
						{
							title: '办卡人姓名',
							content: res.data.data.userInfo.userName
						},
						{
							title: '办卡人员工ID',
							content: res.data.data.userInfo.employeeCode
						}
					
					]
					this.baseInfo=bb;
					
				})
				
			},
			
			consumption: function(e) {
				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontUserinfo/find/'+e, 'GET').then(res => {
					console.log(res.data.data.records);
					this.consumption_info=res.data.data.records;
					this.total=res.data.data.total;
					// console.log(this.consumption_info);
				})
				
			},
			
			card: function(e) {
				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontUserinfo/cards/'+e, 'GET').then(res => {
					console.log(res.data.data);
					this.card_info=res.data.data;
					this.card_number=res.data.data.length;
					// console.log(this.consumption_info);
				})
				
			},
			
			getImgUrl(image){
			   return configs.myBaseUrl+image;
			},
			
			details(id) {
				uni.navigateTo({
					url:"../index_membership_detail_add/index_membership_detail_add?userid="+id,
				});
			},
			follow(id) {
				uni.navigateTo({
					url:"../index_membership_detail_record/index_membership_detail_record?userid="+id,
				});
			},
			callPhone(tel){
				uni.makePhoneCall({
					phoneNumber: tel,
					success: () => {
						console.log("成功拨打电话")
					},
					fail: () => {
						
					}
				})
			},
			doStatus(str){
				 switch (str) {
					case 1:
						return "已有宝宝";
					case 2:
						return "已怀孕";
					case 3:
						return "备孕中";
					case 4:
						return "暂无计划";
				}
			}
		}
	}
</script>
<style src="../../static/css/app.css"></style>
<style>
	page{
		padding-bottom: 100rpx;
	}
	.title_box4 {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.title_box4 .tb_left {
		width: auto;
	}

	.title_box4 .tb_left .avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.title_box4 .tb_left .icon {
		width: 36rpx;
		height: 36rpx;
		border-radius: 0rpx;
		margin-left: 20rpx;
	}

	.title_box4 .tb_left .name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		line-height: 28rpx;

	}

	.title_box4 .tb_left .num {
		margin-top: 20rpx;
		color: #999;

	}

	.title_box4 .credits {
		font-size: 28rpx;

		font-weight: bold;
		color: #F9600D;
		line-height: 28rpx;

	}

	.infoItem.present {
		font-size: 24rpx;
		line-height: 80rpx;
		height: 80rpx;
	}

	.infoItem.present .iTitle {
		width: auto;
	}

	.title_box5 .note {
		color: #F9600D;
		font-weight: normal;
	}

	.title_box5 .total {
		font-weight: normal;
	}

	.dpList {
		padding-bottom: 30rpx;
		white-space: nowrap;
	}

	.depositCard {
		width: 600rpx;
		height: 280rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		font-size: 20rpx;
		line-height: 20rpx;
		color: #fff;
		box-sizing: border-box;
		padding: 40rpx 30rpx 30rpx 30rpx;
		margin-left: 30rpx;
		display: inline-block;
		
	}

	.depositCard .bgImg {
		top: 0rpx;
		left: 0rpx;
		z-index: 0;
	}

	.depositCard:last-of-type {
		margin-right: 30rpx;
	}

	.depositCard .dpLogo {
		top: 30rpx;
		left: 30rpx;
	}

	.depositCard .cardLogo {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.depositCard .cardTitle {
		width: calc(100% - 80rpx);
	}

	.depositCard .cardTitle .title {
		font-size: 28rpx;
		line-height: 28rpx;
		margin-bottom: 12rpx;
	}

	.depositCard .statistic {
		width: 100%;
		bottom: 30rpx;
		left: 30rpx;
	}

	.depositCard .statistic .sItem {
		width: 50%;
		line-height: 24rpx;
		
	}

	.depositCard .statistic .sItem:last-of-type {
		width: 50%;
	}

	.depositCard .statistic .price {
		margin-top: 20rpx;
	}

	.depositCard .statistic .sItem .num {
		font-size: 28rpx;
		line-height: 28rpx;
		margin-right: 10rpx;
	}


	.depositCard .cardLogo {
		background: url() no-repeat center;
		background-size: cover;
	}

	.depositCard.expired .cardLogo {
		background: url() no-repeat center;
		background-size: cover;
	}
	.goodWrapper{
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx #eee solid;
	}
	.goodWrapper:last-of-type{
		border-bottom: none;
	}
	.goodWrapper .time{
		font-size: 20rpx;
		color: #F9600D;
		line-height: 24rpx;
	}
	.cb_item{
	    box-sizing: border-box;
	    /* padding: 0rpx 30rpx 30rpx 30rpx; */
	    justify-content: space-between;
		margin-top: 12rpx;
	}
	.cb_item .img{
	    width: 200rpx;
	    height: 160rpx;
	    border-radius: 12rpx;
	    margin-right:20rpx;
	    overflow: hidden;
	}
	.cb_item .words{
	    width: calc(100% - 230rpx);
	    height: 160rpx;
	}
	.cb_item .words .title{
	    font-size: 28rpx;
	    line-height: 28rpx;
	    margin-top: 9rpx;
	}
	.cb_item .words .label{
	    font-size: 20rpx;
	    line-height: 40rpx;
	    margin-top: 20rpx;
	    padding-left: 12rpx;
	    padding-right: 12rpx;
	    background-color: #eee;
	    color: #666;
		border-radius: 8rpx;
	}
	.cb_item .words .wFoot{
	    width: 100%;
	    margin-top: 32rpx;
	    font-size: 24rpx;
	    line-height: 24rpx;
	    justify-content: space-between;
	
	}
	.cb_item .words .wFoot .price{
	
	
	    font-size: 20rpx;
	    line-height: 20rpx;
	    color: #FF1313;
	    font-weight: bold;
	}
	.cb_item .words .wFoot .price .num{
	    font-size: 28rpx;
	    line-height: 28rpx;
	}
	.cb_item .words .wFoot .changeAmount .icon{
	    width: 32rpx;
	    height: 32rpx;
	}
	.cb_item .words .wFoot .changeAmount text{
	   color: #999;
	}
	.btn_box4{
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		height: 100rpx;
		background-color: #fff;
		bottom: 0rpx;
		left: 0rpx;
	}
	.btn_box4 button:not([size = 'mini']){
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #F9600D;
		box-sizing: border-box;
		border: 1rpx #F9600D solid;
		border-radius: 30rpx;
	}
	.btn_box4 .btn{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #F9600D;
		box-sizing: border-box;
		border: 1rpx #F9600D solid;
		border-radius: 30rpx;
		margin-left: 5rpx;
		margin-right: 5rpx;
	}
</style>
